<template>
  <div class="container">
    <div class="content">
      <div class="title">
        <div class="line"></div>
        <div class="title-text">服务贸易</div>
      </div>
      <div id="myChart" :style="{width:'100%',height:'438px'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Service',
  props: {
    list: Array
  },
  data () {
    return {
      optionsValue: [],
      optionsName: []
    }
  },
  methods: {
    service () {
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter (p) {
            return `${p[0].marker} ${p[0].value} 万美元`
          }
        },
        grid: {
          top: 30,
          bottom: 50
        },
        xAxis: {
          type: 'category',
          data: this.optionsName,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDCDC'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 13
            }
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#DCDCDC'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: 12
            },
            formatter: '{value} 万美元'
          }
        },
        series: [
          {
            data: this.optionsValue,
            type: 'bar',
            barWidth: 27, // 设置柱子的宽度,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: '#75B9F5' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#188DF0' // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    getInfo () {
      const name = this.list.map(item => {
        return item.quota_name
      })
      const value = this.list.map(item => {
        return item.current_value
      })
      this.optionsValue = value
      this.optionsName = name
    }
  },
  mounted () {
    this.getInfo()
    this.service()
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  .content {
    height: 472px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px -8px 39px 1px rgba(230, 230, 230, 0.5),
      0px 8px 39px 1px rgba(230, 230, 230, 0.5);
    border-radius: 20px;
    .title {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 17px 0 10px 20px;
      .line {
        width: 7px;
        height: 24px;
        background: #1492ff;
        border-radius: 4px;
        margin-right: 7px;
      }
      .title-text {
        font-size: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
</style>
